<template>
	<el-container>
		<el-header class="header">
			<div class="header_left">
				<div class="user">当前用户：{{store.user.userName}}</div>
				<img src="../assets/images/logo.png" />
				<el-menu style="width: 300px;" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
					<el-menu-item index="1">首页</el-menu-item>
					<el-sub-menu index="2">
						<template #title>新闻</template>
						<el-menu-item index="2-1">国内</el-menu-item>
						<el-menu-item index="2-2">军事</el-menu-item>
						<el-menu-item index="2-3">娱乐</el-menu-item>
						<el-menu-item index="2-4">房地产</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</div>
			<div class="header_right">
				<el-button v-if="store.user.userName" type="text" @click="logout()">注销</el-button>
				<el-button v-else type="text" @click="login()">登录</el-button>
				<el-button type="text" @click="toBack()">进入后台</el-button>
			</div>
		</el-header>
		<el-main><router-view></router-view></el-main>
		<el-footer class="footer">
			焦作师范高等专科学校新闻发布系统 @ The News Release System
		</el-footer>
	</el-container>
</template>


<script>
	//引入store
	import {
		store
	} from '../store.js'
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				store
			}
		},
		methods: {
			//登录按钮点击事件
			login() {
				this.$router.push('/login')
			},
			toBack() {
				if (this.store.user.role == 1) {
					this.$router.push('/back')
				} else {
					ElMessage.error('只有管理员才能进入后台！')
				}

			},
			logout() {
				this.store.user = {
					id: 0,
					userName: "",
					fullName: "",
					password: "",
					role: 0
				}
			}
		}
	}
</script>

<style>
	.header {
		height: 60px;
		display: flex;
		justify-content: space-between;
		background-color: #545c64;
	}

	.header_left {
		width: 50%;
		display: flex;
	}

	.header_right {
		margin-right: 1rem;
		line-height: 60px;
	}

	.user {
		height: 60px;
		line-height: 60px;
		color: ghostwhite;
		font-size: 1.2rem;
	}

	.el-button--text {
		color: ghostwhite;
	}

	.footer {
		height: 3rem;
		line-height: 3rem;
		border-top: 1px solid darkslategrey;
		text-align: center;
	}
</style>